<template>
  <div>
    <Row ref="mapviewRef">
      <Col :span="10">
        <div>
          <Affix :offsetTop="2" :target="getAffixContainer">
            <HouseMngMap :showMapOnly="true" :showMapPopupButtons="false" ref="houseMngRef" />
          </Affix>
        </div>
      </Col>
      <Col :span="14">
        <div class="card-container">
          <a-tabs v-model:activeKey="activeKey" type="card">
            <a-tab-pane key="1" tab="房屋基本信息222">
              <PageWrapper>
                <Description @register="getfwinfo" class="mt-4" :labelStyle="{ width: '15em' }" />
              </PageWrapper>
            </a-tab-pane>
            <a-tab-pane key="2" tab="隐患信息">
              <PageWrapper>
                <Description @register="getyhinfo" class="mt-4" :labelStyle="{ width: '15em' }" />
              </PageWrapper>
            </a-tab-pane>
          </a-tabs>
        </div>
      </Col>
    </Row>
  </div>
</template>
<script lang="ts">
  import { defineComponent, ref, computed } from 'vue';
  import { Description, useDescription } from '/@/components/Description/index';
  import { PageWrapper } from '/@/components/Page';
  import { useRoute } from 'vue-router';
  import { getYhDetailColumns, getFwDetailColumns } from './tableData';
  import { houseApi } from '/@/api/demo/table';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { propTypes } from '/@/utils/propTypes';
  import HouseMngMap from '/@/views/houseMng/HouseMap.vue';
  import { Col, Row, Affix } from 'ant-design-vue';
  const { createMessage } = useMessage();
  const { error } = createMessage;

  export default defineComponent({
    components: { Description, PageWrapper, HouseMngMap, Col, Row, Affix },
    props: {
      pid: propTypes.string,
      typ: propTypes.number,
      hid: propTypes.string,
      chk: propTypes.bool,
    },
    setup(props) {
      const route = useRoute();
      const activeKey = ref('1');
      const houseInfo = ref<Recordable>({});
      const detailInfo = ref<Recordable>({});
      const oid = route.params?.id ?? props.pid; //id
      const typ = route.query?.typ ?? props.typ;
      const typCommercial = 1 == typ;
      const typMode = computed(() => (typCommercial ? '' : ''));
      const houseName = computed(() => houseInfo.value['fwbh']);

      const houseMngRef = ref();
      const mapviewRef = ref();
      function getAffixContainer() {
        return document.getElementById('firePlaceDetailDrawer');
      }
      //根据id获取自查情况
      houseApi({ id: oid })
        .then((d) => {
          houseInfo.value = d;
          detailInfo.value = d;
        })
        .catch((err) => {
          error(err.message || '获取房屋信息失败');
        });
      const [getfwinfo] = useDescription({
        title: '',
        data: detailInfo,
        schema: getFwDetailColumns(props.chk),
        column: 2,
        collapseOptions: { canExpand: true, helpMessage: oid },
      });

      const [getyhinfo] = useDescription({
        title: '',
        data: detailInfo,
        schema: getYhDetailColumns(props.chk),
        column: 1,
        collapseOptions: { canExpand: true, helpMessage: oid },
      });
      function locMap() {
        houseMngRef.value.locMap(oid);
      }

      return {
        getyhinfo,
        getfwinfo,
        oid,
        typMode,
        houseName,
        houseMngRef,
        locMap,
        mapviewRef,
        activeKey,
        getAffixContainer,
      };
    },
  });
</script>
<style scoped>
  .vben-page-wrapper .vben-page-wrapper-content {
    margin: 0px;
  }
  .card-container p {
    margin: 0;
  }
  .card-container > .ant-tabs-card .ant-tabs-content {
    height: 120px;
    margin-top: -16px;
  }
.card-container > .ant-tabs-card .ant-tabs-content > .ant-tabs-tabpane {
  padding: 0px;
  background: #fff;
}
.card-container > .ant-tabs-card > .ant-tabs-nav::before {
  display: none;
}
.card-container > .ant-tabs-card .ant-tabs-tab,
[data-theme='compact'] .card-container > .ant-tabs-card .ant-tabs-tab {
  background: transparent;
  border-color: transparent;
}
.card-container > .ant-tabs-card .ant-tabs-tab-active,
[data-theme='compact'] .card-container > .ant-tabs-card .ant-tabs-tab-active {
  background: #fff;
  border-color: #fff;
}
  #components-tabs-demo-card-top .code-box-demo {
  padding: 24px;
  overflow: hidden;
  background: #f5f5f5;
}
[data-theme='compact'] .card-container > .ant-tabs-card .ant-tabs-content {
  height: 120px;
  margin-top: -8px;
}
[data-theme='dark'] .card-container > .ant-tabs-card .ant-tabs-tab {
  background: transparent;
  border-color: transparent;
}
[data-theme='dark'] #components-tabs-demo-card-top .code-box-demo {
  background: #000;
}
[data-theme='dark'] .card-container > .ant-tabs-card .ant-tabs-content > .ant-tabs-tabpane {
  background: #141414;
}
[data-theme='dark'] .card-container > .ant-tabs-card .ant-tabs-tab-active {
  background: #141414;
  border-color: #141414;
}
</style>
